<template>
  <view class="whole">
    <view class="type">
      <view class="toptype">
        <view
          :class="typeid == 1 ? 'typenow' : 'typefuture'"
          @click="switchtype(1)"
        >
          转出
        </view>
        <view>
          <view
            style="
              width: 4rpx;
              height: 19px;
              background: #343744;
              margin-top: 20rpx;
            "
          ></view>
        </view>
        <view
          :class="typeid == 2 ? 'typenow' : 'typefuture'"
          @click="switchtype(2)"
        >
          转入
        </view>
      </view>
    </view>
    <view class="transferAll">
      <view class="" v-if="pagestate">
        <block v-for="(item, index) in list" :key="index">
          <view class="list_whole">
            <view class="list_top">
              <view class="list_top_top">
                <image
                  :src="item.user_product.product_snap.cover"
                  mode=""
                  class="list_top_img"
                ></image>
                <view class="list_top_center">
                  <view style="color: aliceblue" class="product_snap_name">{{
                    item.user_product.product_snap.name
                  }}</view>
                  <view
                    style="
                      display: flex;
                      align-items: center;
                      margin-top: 20rpx;
                    "
                  >
                    <image
                      :src="item.user_product.product_snap.creator_avatar"
                      style="
                        width: 34rpx;
                        height: 34rpx;
                        margin-right: 10rpx;
                        border-radius: 50rpx;
                      "
                    ></image>
                    <view class="list_creator_name">{{
                      item.user_product.product_snap.creator_name
                    }}</view>
                  </view>
                  <view
                    style="
                      display: flex;
                      align-items: center;
                      margin-top: 20rpx;
                    "
                  >
                    <image
                      src="/static/collect_icon.png"
                      style="width: 44rpx; height: 44rpx; z-index: 997"
                      class="item_farstimg"
                    ></image>
                    <view class="item_center">{{ item.user_product.no }}</view>
                  </view>
                </view>
              </view>
              <view class="">
                <text style="color: #1fe7e7">转赠成功</text>
              </view>
            </view>
            <view class="list_bottom">
              <view class="list_bottom_top" v-if="typeid == 1">
                <text style="color: #bbbbbe; font-size: 28rpx">转赠对象</text>
                <text class="list_bottom_top_text">{{
                  item.to_user ? item.to_user.chain_address : ""
                }}</text>
              </view>
              <view class="list_bottom_top" v-else>
                <text style="color: #bbbbbe; font-size: 28rpx">赠送方</text>
                <text class="list_bottom_top_text">{{
                  item.from_user ? item.from_user.chain_address : ""
                }}</text>
              </view>
              <view class="list_bottom_bottom">
                <text style="color: #bbbbbe; font-size: 28rpx">转赠时间</text>
                <text style="color: aliceblue">{{ item.created_at }}</text>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
    <empty :show.sync="list.length == 0 && pagestate"></empty>
  </view>
</template>

<script>
import api from "../../api/api";
import empty from "@/components/empty/empty";
export default {
  data() {
    return {
      list: [],
      pagestate: false,
      liststate: false,
      page: 1,
      typeid: 1,
    };
  },
  onLoad() {},
  onShow() {
    this.record();
  },
  onReachBottom() {
    this.page++;
    this.record();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.record();
  },
  methods: {
    switchtype(id) {
      this.typeid = id;
      this.page = 1;
      this.record();
    },
    async record() {
      let res = await api.passOnLog({
        query: {
          page: this.page,
          type: this.typeid,
        },
        loading: "加载中",
      });
      if (res.code == 0) {
        uni.stopPullDownRefresh();
        res.data.forEach((x) => {
          x.user_product.product_snap = JSON.parse(x.user_product.product_snap);
        });
        this.pagestate = true;
        if (this.page == 1) {
          this.list = res.data;
        } else {
          if (res.data.length > 0) {
            this.list = [...this.list, ...res.data];
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.whole {
  width: 100%;
  height: 100%;
  background-color: $bg-color1;
  min-height: 100vh;
  .type {
    padding: 3rpx;
  }
  .toptype {
    border-radius: 8px;
    background-color: $bg-color3;
    height: 44px;
    margin: 30rpx 30rpx 0;
    display: flex;
    justify-content: center;
    line-height: 44px;
    align-content: center;
    .typenow {
      font-size: 14px;
      font-weight: 500;
      color: $text-color3;
      margin: 0 140rpx;
    }
    .typefuture {
      font-size: 14px;
      font-weight: 500;
      color: #cccccc;
      margin: 0 140rpx;
    }
  }
  .transferAll {
    // width: 100%;
    padding: 3rpx 0;

    border-radius: 15rpx;
    .list_whole {
      background-color: $bg-color3;
      border-radius: 24rpx;
      margin: 30rpx;
      display: flex;
      flex-direction: column;
      padding-bottom: 30rpx;
      .list_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30rpx;
        padding-bottom: 30rpx;
        border-bottom: 2rpx solid #262934;
        .list_top_top {
          display: flex;
          .list_top_img {
            width: 170rpx;
            height: 170rpx;
            border-radius: 16rpx;
          }
          .list_top_center {
            margin-left: 30rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            .product_snap_name {
              width: 360rpx;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .item_center {
              position: relative;
              left: -30rpx;
              margin-left: 5rpx;
              font-size: 20rpx;
              padding: 5rpx 20rpx 5rpx 36rpx;
              border-radius: 17rpx;
              color: $text-color4;
              // background: $button;
              // background-repeat: no-repeat;
              // background-size: 100%;
              background: $gradient1;

              max-width: 260rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .list_creator_name {
              font-size: 24rpx;
              color: #ffffff;

              width: 260rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
      .list_bottom {
        display: flex;
        flex-direction: column;
        margin: 0rpx 30rpx 0;
        .list_bottom_top {
          display: flex;
          justify-content: space-between;
          .list_bottom_top_text {
            color: #ffffff;
            width: 500rpx;
            // height: 50rpx;
            // overflow: hidden;
            word-break: break-all;
          }
        }
        .list_bottom_bottom {
          margin-top: 30rpx;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
